Console Design Best Practices

I am new to ON24 and my biggest challenge is good console design for attendees.

I have seen some others talk about the challenges with the responsive design and how things get moved all over depending on the attendees screen resolution.

If anyone would be willing to share your experiences, best practices, and maybe even screenshots of your consoles, that would be great.

Thank you.

1 Like

Hi John!
The biggest issue we had was with the CTAs. The size of the tool box isn’t the same size for the images we decided to use in it. Additionally the button has to be made by the ON24 functionality (not as part of the image). That also threw off the size of the image my creative team has to make each time. So, we played with it until we were happy. Then I created the attached screenshot which we can use as a guide for all of our webinars.

The Chat and Email are minimized (if even on) when we start the webinar. However, if you set it up in a certain place, when the person maximizes the tool, it will go to wherever you set it (cool!).

Another couple of pain points are: 1) there is no “Snap to Grid” function and 2) you can’t shift the boxes using your keyboard. It’s all mouse work. While the Align tools are HEAVENLY, if you click on the box and move your mouse even a micro amount, it will shift the box. #Frustrating.

One more thing, for each tool, I always have to remember to go into the “Attributes” to change the hover state of the buttons in the dock (along the bottom) so it matches whatever my button says. I am terrible at remembering this so I’d suggest adding a reminder in any sort of task list you use!

Anywho, happy answer any questions if you have them!

~Jaime

2 Likes

Thank you so much @jaime.1. Yeah, the part I have struggled with is the tools and coming up with a great layout, that will work on both a laptop and a desktop, and at different resolutions. I have found the responsive design doesn’t always play well with the tools placements.

1 Like

@jaime.1 how did you decide on 1920x937 as your console size?

@john.90fb1bab It’s what my screen resolution is and then confirmed it looked good with a handful of other employees so we could see it in different sizes.

We did not turn on the responsive option. While it’s great in theory, as you mentioned, the tools don’t play well. This way it’s set and we know it what it will look like and people can either scroll as needed or rearrange. We leave that option turned on for every tool that includes it.

1 Like

Okay, so don’t shoot me, but I think this is the last question. :grin: You are the only one responding so…

I don’t see a setting for the resolution for the console.

Did you do one of the following, or something else? I could play with all of them, but hopefully it is an easier answer that I can learn from.

  1. Create a background of 1920x937 and then set the tools to fit on that?
  2. Add up the width and length of each tool to come up with that resolution?
  3. Set the resolution in the browser and build around that?

@john.90fb1bab Ask away! I have no problem answering. I love me some ON24.

Basically, I opened up the ON24 console builder for my template webinar and started arranging the boxes until I was happy. I sent a preview link of that to my Creative team and they agreed.

The background image we had to play with a bit. We decided to make our logos part of that background image so it was another reason doing the mobile optimization wasn’t going to work. You could choose to have those as image tools instead. FYI, our background image is sized to 2900x1350 (pixels) for our console.

Additional thoughts:

  • We designed branded buttons for our dock. For those we have them all sized at 127x127 (pixels).
  • I mentioned the template and wanted to make sure you knew about this. I created a webinar dated for the middle of 2023. Then I marked it as a “Test”. Inside the console builder, once I was happy, I saved that as a Console template, but because I made an EVENT template, I have our domain blocking, email templates, etc. setup so each time I have a webinar, I’m cloning that which includes the template of the console builder. I attached a screenshot to help with these concepts. Here’s a help article too! https://on24support.force.com/Support/s/article/Creating-a-Webcast-Template

Let me know if more questions come up!
~Jaime!

1 Like

Hi @john.90fb1bab and @jaime.1

John, wanted to share what our console looks like and to also concur with everything that Jaime has stated about the gotcha’s and various frustrations we’ve faced when creating templates and consoles, including the no snapping feature, no keyboard moving of objects on the console, the CTAs being weirdly shaped (we decided to go with images as links on our dashboard, rather than CTAs).

However, I also want to echo some of the great tips she shared such as creating your own dock icons, creating a template event that you can just copy every time you want to create a new webcast (it keeps all your previous settings intact, including dashboard design), and creating a dashboard with non-responsive, only because the tools may act weird.

Here’s how we customized our dashboard with a nice background, custom designed banner at the top, custom dock icons and a very clean layout. Also note, we use broadcast as our present type, hence why there is no slide area.

This is our webcast templates that we’ll alter if needed.

Webcast%20Templates

1 Like

@george thank you so much. This is the stuff that is invaluable so I don’t have to mess up the first few. Many of ours will be screenshare (Media Player) also so I appreciate your design.

Good idea with the CTAs you made images of. It looks way better.

Thank you again.

1 Like

Love the CTAs George! Had to send this idea around to our graphics people to pile some more work on them for our events :-).

1 Like

I had a question about the images actually. It’s been long enough that I can’t remember exactly why we stuck with the CTA tool over the Image tool. I think in the back of my mind, I was attributing more weight to the CTAs. However, I’m wondering now if there is any truth to that. :thinking:

1 Like

We went with the images because the CTAs on24 offers didn’t match our normal brand style we do for all our webcasts. For example, the images on the dashboard advertising other webcasts, those are part of a larger photoshop template set that we use for advertising on social and on our site… so everything looks exactly the same (ad image, layout, button size, etc).

I’ll say, the one big caveat to using clickable images in place of on24 CTAs is that you won’t get analytics on clicks via On24 reporting as you would on a CTA (CTA is listed as TAKE ACTION on reporting). But the functions of clickable images work the same, just using a url.

I’m unsure why they don’t allow for clicks to be tracked on images, but there you go. ¯_(ツ)_/¯

EDIT: How we track our image clicks on images is through link attribution on our site where the URL we place on the image includes a tracking source.

1 Like

Thanks! I responded to @jaime.1 with my thoughts on CTAs vs clickable images. But since you mentioned graphics people, one of the major things our designers did was created photoshop template file that has 8 different sized artboards, that way the designer working on that specific webcast can choose an image and type the text needed into one layout and can still work in the SAME photoshop file for all the sizes we need for that one webcast. This includes the On24 dashboard, which our size is 230 x 300, but also all the social and website sizes. The designer doesn’t have to manipulate the design across different sizes on different files. Everything is in one photoshop document… which is HEAVENLY!

1 Like

Thank you @george. You refreshed my memory on why we went with CTAs and I can confirm that was our reasoning. I like that your team created a PSD template. That’s a great idea. Templates are the best thing ever!

~Jaime